<template>
	<view class="list_circle_demand" v-if="list && list.length">
		<view v-if="type == 1" class="circle_demand_service_item" v-for="(item, index) in list" :key="index">
			<view class="circle_demand_service_image" @click="goUrlService(item)">
				<image :src="item.image[0]">
			</view>
			<view class="circle_demand_service_data">
				<view class="circle_demand_service_title line2">{{item.title}}</view>
				<view class="circle_demand_service_tel">
					<view class="circle_demand_service_t">
						<image :src="domain + '/uploads/def/20230703/8a86ee47e8ca30aa63ce6ad95c1bc151.png'" mode="widthFix" @click="getUserContactInformations(item, 'we_chat_account')"/>
					</view>
					<view class="circle_demand_service_t">
						<image :src="domain + '/uploads/def/20230703/54b09da7a3583769bae9b03a9d626fa7.png'" mode="widthFix" @click="getUserContactInformations(item, 'phone')"/>
					</view>
				</view>
				<view @click="getUserContactInformations(item, 'map')" class="circle_demand_service_add" v-if="item.province || item.city || item.district || item.address">
					<view class="circle_demand_service_add_icon"><image :src="domain + '/uploads/default/20230704/0788cb1baa37ab1fe97ce7116cd07e42.png'" /></view>
					<view class="circle_demand_service_address line1">{{item.province + item.city + item.district + item.address}}</view>
				</view>
			</view>
		</view>
		<view v-if="type == 2" class="circle_service_item" v-for="(item, index) in list" :key="index">
			<view class="circle_service_avatar">
				<image :src="item.author.avatar ? item.author.avatar : (item.author.sex == 2 ? 'https://img.jukee.net/def/1acf8202312251748401249.png' : 'https://img.jukee.net/def/bd5e8202312251748397655.png')"  @click="goUrlService(item)" />
				<!-- <view  v-if="(isMy || item.is_my_send) && item.is_promotion == 1" class="home_promotion">
					<view class="service_promotion_btn" @click="labelPromotion(item)">行业置顶</view>
					<view class="service_promotion_btn" @click="homeRefresh(item)">首页刷新</view>
				</view> -->
				<view  class="home_promotion" v-if="isGroupLeader">
					<view class="service_promotion_btn" @click="delCircleCommunity(item , index)">删除</view>
				</view>
			</view>
			<view class="circle_service_content">
				<view class="circle_service_con">
					<view class="circle_service_u line1" @click="goUrlService(item)">
						<!-- <view v-if="item.is_promotion == 1"></view> -->
						<view class="circle_service_nickname">
							<view class="circle_service_name" >{{item.author.nickname}}</view>
							<image src="https://img.jukee.net/def/e7d83202310241023193324.gif" style="width: 36rpx; height: 48rpx; margin-left: 10rpx;display: block;flex-shrink: 0;" v-if="item.is_promotion == 1">
							<text v-if="item.is_industry_top == 1" style="background-color: #FADC00;color: #000;margin-left: 5rpx;font-size: 18rpx;padding: 0 3rpx;border-radius: 5rpx;">行业置顶</text>
						</view>
						<view class="circle_service_time">
							{{item.create_time}} <text class="is_refresh" v-if="item.is_refresh">刷新</text>
						</view>
					</view>
					<view class="service_guanzhu" v-if="!item.is_start && !item.is_my_send && !isMy"  @click.stop="followAuthor(index, 1)">
						<image :src="domain + '/uploads/def/20230719/81f2caeafd90d9100770b33ac0d35949.png'" mode="widthFix" />
						关注
					</view>
					<view class="service_promotion" v-if="isMy || item.is_my_send">
						<view class="service_promotion_btn" @click="editCommunityShow(index)" v-if="isEdit" style="background-color: unset;border: 1rpx solid #050505;margin: 0 10rpx;">{{item.is_show == 1 ? '下架' : '上架'}}</view>
						<view class="service_promotion_btn" @click="editCommunity(item)" v-if="isEdit" style="background-color: unset;border: 1rpx solid #050505;margin: 0 10rpx;">编辑</view>
						<button class="circle_service_share" open-type="share" @click="getUserContactInformations(item, 'share')" style="background-color: unset;">
							<image src="https://img.jukee.net/def/80e48202312181447273388.png" style="width: 70rpx;height: 62rpx;" />
						</button>
						<!-- <view class="service_promotion_btn" @click="userPromotion(item)">发客户</view>
						<view class="service_promotion_btn" @click="circlePromotion(item)" v-if="item.is_promotion == 0">上首页</view>
						<view class="service_promotion_btn" @click="serviceRefresh(item)" v-if="item.is_promotion == 0">
							刷新
						</view>
						<view class="service_promotion_btn" @click="goUrl('/pages/extends/circle_create/promotion_circle_list?community_id='+item.community_id)" v-if="item.is_promotion == 0">置顶</view>
						
						<view class="service_promotion_btn" @click="homeRefresh(item)" v-if="item.is_promotion == 1">首页刷新</view>
						<view class="service_promotion_btn" @click="labelPromotion(item)" v-if="item.is_promotion == 1">行业置顶</view> -->
						
					</view>
					<view class="circle_service_t" v-else>
						<view class="circle_service_tel" @click="getUserContactInformations(item, 'we_chat_account')">
							<image :src="domain + '/uploads/default/20230704/c4fa17042a83ac0489d48344ccf6eb6e.png'" />
						</view>
						<view class="circle_service_tel" @click="getUserContactInformations(item, 'phone')">
							<image :src="domain + '/uploads/default/20230704/6067cedf7e4d911be164f789cca30df4.png'" />
						</view>
					</view>
				</view>
				<checkbox-group v-if="item.circle && item.circle.length && check_servive_circle_id == item.community_id && isMy" class="circle_top_list" @change="changeServiceCircleTop">
					<view v-for="(v, i) in item.circle" :key="i" class="circle_top_item">
						<checkbox :value="v.id" color="#FFE103" class="circle_top_checkbox" />
						<view class="circle_top_img">
							<image :src="v.avatar" />
						</view>
						<view class="circle_top_tit line1">
							{{v.title}}
						</view>
					</view>
					<view class="circle_top_button" @click="payServiceCircleTop">人脉圈置顶推广</view>
				</checkbox-group>
				<view v-if="item.price && item.price > 0" class="circle_service_price font-size36-bold"><text>¥</text>{{item.price}}</view>
				<view class="circle_service_content" :class="item.is_line ? 'line5' : ''"  @click="goUrlService(item)">{{item.content}}</view>
				<view v-if="item.is_line" @click="hasBlockLine(index)" style="font-size: 36rpx;font-weight: bold;margin-left: 10rpx">更多···</view>
				<view v-if="item.is_line2 && !item.is_line" @click="hasNoneLine(index)" style="font-size: 36rpx;font-weight: bold;margin-left: 10rpx">收起···</view>
				<view class="circle_service_img" v-if="item.image && item.image.length && item.service_type == 0">
					<view class="circle_service_imgs" v-for="(v,i) in item.image" :key="i" @click="clickImg(item.image, i, item.community_id)" :style="{'background-image':'url('+v+')'}">
						<!-- <image :src="v" /> -->
					</view>
				</view>
				<view class="circle_service_img" v-if="item.video_link && item.image && item.image.length && item.service_type == 1" style="display: block;">
					<view class="circle_service_imgs" @click="clickVideo(item.video_link, item.community_id)" style="width: 100%; height: 320rpx; border-radius: 15rpx; padding-top: 120rpx;" :style="{background: 'url('+item.image[0]+') center center / 100% auto no-repeat'}">
						<image class="industry_video_play" :src="domain + '/uploads/def/20230702/81e09dc636713665018806f309d37481.png'" style="display: block;margin: 0 auto;width: 88rpx;height: 88rpx;" />
					</view>
				</view>
				<view class="service_link" v-if="item.link_url && item.link_pic" @click="openH5UrlHandler" :data-url="item.link_url">
					<view class="link_pic">
						<image :src="item.link_pic"/>
					</view>
					<view class="link_url">
						#活动链接
					</view>
				</view>
				<view v-if="isEdit && isMy" class="my_show_circle">
					<view class="button" style="margin: 30rpx 0;font-weight: bold;font-size: 28rpx;">已推广圈子</view>
					<view class="button">
						<view class="service_circle_recommend" v-if="item.circle.length">
							<view class="service_circle_item" >
								<image v-for="(c, ci) in item.circle" :key="ci" :src="c.avatar" @click="getCircleInfo(c.id)"/>
							</view>
							<view class="service_circle_more acea-center" @click="goUrl('/pages/extends/circle_create/list?type=4&community_id='+item.community_id)">
								<image src="https://img.jukee.net/def/3ba11202310251825303779.png" mode="widthFix" />
							</view>
						</view>
					</view>
				</view>
				<view class="gn_more" v-else>
					<view class="service_circle_recommend" v-if="item.circle && item.circle.length">
						<view class="service_circle_item" v-for="(c, ci) in item.circle" :key="ci" v-if="ci < 3">
							<image :src="c.avatar" @click="getCircleInfo(c.id)"/>
						</view>
						<view class="service_circle_more" @click="goUrl('/pages/extends/circle_create/list?type=4&community_id='+item.community_id)">···</view>
					</view>
					<!-- <view class="circle_service_infos" :class="gb_community_id == item.community_id ? 'show' : 'hide'">
						<button class="circle_service_share" open-type="share" @click="getUserContactInformations(item, 'share')">
							<view class="circle_service_icon"><image src="https://img.jukee.net/def/f4c2c202310072303078945.png"/></view>
							<view class="circle_service_count">
							分享{{item.count_share}}
							</view>
						</button>
						<view class="circle_service_share" @click="openSendCommend(item.community_id, index)">
							<view class="circle_service_icon"><image src="https://img.jukee.net/def/68c8c202310072303081495.png"/></view>
							<view class="circle_service_count">
							评论
							</view>
						</view>
					</view>
					<view class="gn_more_btn" @click="gb_community_id == item.community_id ? closeServiceComment() : gb_community_id = item.community_id">··</view> -->
					<view class="service_info_statistics acea-center" style="margin-left: auto;">
						<view class="service_info_s_item acea-center" @click="openSendCommend(item.community_id, index)">
							<view class="service_info_s_img acea-center"><image src="https://img.jukee.net/def/60cd2202310171208348528.png" style="height: 40rpx;width: 40rpx;" /></view>
							<view class="service_info_s_num acea-center" style="margin-left: 10rpx;">{{item.count_reply || 0}}</view>
						</view>
						<view class="service_info_s_item acea-center" style="margin-left: 30rpx;">
							<view class="service_info_s_img acea-center"><image src="https://img.jukee.net/def/d77d9202310141112474983.png" style="height: 40rpx;width: 40rpx;" /></view>
							<view class="service_info_s_num acea-center" style="margin-left: 10rpx;">{{item.hits || 0}}</view>
						</view>
					</view>
				</view>
				<view class="service_promotion acea-center" v-if="isMy || item.is_my_send" style="justify-content: space-between;margin-top: 30rpx;">
					<view class="service_promotion_btn" @click="userPromotion(item)" style="    padding: 0; background: transparent; height: 56rpx;">
            <image src="https://ly.jukee.net/static/tkh.gif" style="width: 96rpx; height: 56rpx;" />
          </view>
					<view class="service_promotion_btn" @click="goUrl('/pages/extends/circle_create/promotion_circle_list?community_id='+item.community_id)">圈置顶</view>
					<view class="service_promotion_btn" @click="serviceRefresh(item)">
						刷新
					</view>
					<view class="service_promotion_btn" @click="labelPromotion(item)">行业置顶</view>
					<view class="service_promotion_btn" @click="circlePromotion(item)">首页置顶</view>
					<!-- <view class="service_promotion_btn" @click="homeRefresh(item)" v-if="item.is_promotion == 1">首页刷新</view> -->
				</view>
				<view v-if="isEdit" class="service_stop">
					<view class="service_stop_time">
						<view class="service_stop_t">发布推广：{{item.stop_time}} 到期</view>
						<view class="service_stop_t">首页置顶：{{item.is_promotion == 1 ? item.promotion_time+' 到期' : '--'}}</view>
						<view class="service_stop_t">行业置顶：{{item.is_promotion_top == 1 ? item.promotion_top_time+' 到期' : '--'}}</view>
					</view>
					<view class="service_delayed">
						<view class="service_delayed_btn" @click="communityDelayed(item)">续费发布</view>
					</view>
				</view>
				<!-- <view class="circle_service_infos">
					<button class="circle_service_share" open-type="share" @click="getUserContactInformations(item, 'share')">
						<view class="circle_service_icon"><image :src="domain + '/uploads/default/20230705/a49ba46f3c044676cb4905b036c4b8cb.png'"/></view>
						<view class="circle_service_count">{{item.count_share}}</view>
					</button>
					<view class="circle_service_share">
						<view class="circle_service_icon"><image :src="domain + '/uploads/default/20230705/f0817c9a9acc4afce3cb1f755341a085.png'"/></view>
						<view class="circle_service_count">{{item.count_start}}</view>
					</view>
				</view> -->
				<view class="comment_data" v-if="item.reply && item.reply.length">
					<!-- <view v-if="item.reply_user.length" class="reply_user">
						<block v-for="(v,k) in item.reply_user" :key="k">
							<image :src="v.avatar" class="reply_user_avatar"/>
						</block>
					</view> -->
					<template v-if="item.reply.length">
						<view class="comment_item_value" v-for="(v,k) in item.reply" :key="k" style="display: flex;align-items: center;">
							<image :src="v.avatar" style="width: 50rpx;height: 50rpx; border-radius: 50%;display: inline-table;" @click="goUrl('/pages/chat/customer_list/chat?userId='+v.uid)" />
							<view style="margin-left: 20rpx;">
								<view style="color: #A6B6C8;" @click="goUrl('/pages/chat/customer_list/chat?userId='+v.uid)">{{v.nickname}}:</view>
								<view>{{v.content}}</view>
							</view>
						</view>
					</template>
					<view class="comment_check">
						<view @click="getReplyList(item.community_id, index)" v-if="item.reply.length">查看更多</view>
					</view>
					<!-- <view class="send_comment" v-if="comment_community_id == item.community_id">
						<input class="send_comment_input" type="text" placeholder="请输入评价内容" ref="comment_input" v-model="comment_community_value"/>
						<view class="send_comment_button" @click="createReply(index)">发送</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 服务商 -->
		<view v-if="type == 3" class="circle_demand_service_item" v-for="(item, index) in list" :key="index">
			<view class="circle_demand_service_image" @click="goUrlService(item)">
				<image :src="item.logo">
			</view>
			<view class="circle_demand_service_data">
				<view class="circle_demand_service_title line2" @click="goUrlService(item)">{{item.title}}</view>
				<view class="circle_demand_service_desc line1" @click="goUrlService(item)">
					{{item.content}}
				</view>
				<view class="circle_demand_service_hist" @click="goUrlService(item)">
					{{item.hist}}浏览
				</view>
				<view @click="getUserContactInformations(item, 'map', 1)" class="circle_demand_service_add" v-if="item.province || item.city || item.district || item.address">
					<view class="circle_demand_service_add_icon"><image :src="domain + '/uploads/default/20230704/0788cb1baa37ab1fe97ce7116cd07e42.png'" /></view>
					<view class="circle_demand_service_address line1">{{item.province + item.city + item.district + item.address}}</view>
				</view>
			</view>
			<view class="circle_demand_service_tel">
				<view class="circle_demand_service_t">
					<image :src="domain + '/uploads/def/20230703/54b09da7a3583769bae9b03a9d626fa7.png'" mode="widthFix" @click="getUserContactInformations(item, 'phone', 1)"/>
				</view>
				<view class="circle_demand_service_t">
					<image :src="domain + '/uploads/def/20230703/8a86ee47e8ca30aa63ce6ad95c1bc151.png'" mode="widthFix" @click="getUserContactInformations(item, 'weixin', 1)"/>
				</view>
			</view>
		</view>
		<swiper class="swiper_list_user" autoplay="true" indicator-active-color="#494949" interval="5000" v-if="type == 4 && list.length" :style="{height: swiper_height + 'rpx'}">
			<swiper-item class="list_user" v-for="(list_data, index_data) in list" :key="index_data">
				<view v-if="type == 4" class="circle_demand_service_item" v-for="(item, index) in list_data" :key="index">
					<view class="circle_demand_service_image" @click="goUrlService(item)">
						<image :src="item.logo">
					</view>
					<view class="circle_demand_service_data">
						<view class="circle_demand_service_title line2" @click="goUrlService(item)">{{item.title}}</view>
						<view class="circle_demand_service_desc line1" @click="goUrlService(item)">
							{{item.content}}
						</view>
						<view class="circle_demand_service_hist" @click="goUrlService(item)">
							{{item.hist}}浏览
						</view>
						<view @click="getUserContactInformations(item, 'map', 1)" class="circle_demand_service_add" v-if="item.province || item.city || item.district || item.address">
							<view class="circle_demand_service_add_icon"><image :src="domain + '/uploads/default/20230704/0788cb1baa37ab1fe97ce7116cd07e42.png'" /></view>
							<view class="circle_demand_service_address line1">{{item.province + item.city + item.district + item.address}}</view>
						</view>
					</view>
					<view class="circle_demand_service_tel">
						<view class="circle_demand_service_t">
							<image :src="domain + '/uploads/def/20230703/54b09da7a3583769bae9b03a9d626fa7.png'" mode="widthFix" @click="getUserContactInformations(item, 'phone', 1)"/>
						</view>
						<view class="circle_demand_service_t">
							<image :src="domain + '/uploads/def/20230703/8a86ee47e8ca30aa63ce6ad95c1bc151.png'" mode="widthFix" @click="getUserContactInformations(item, 'weixin', 1)"/>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 手机号微信查看弹窗 -->
		<view class="popup_user_contact" v-show="is_popup_user_contact" @click="is_popup_user_contact=false">
			<view class="popup_user_contact_c">
				<view class="popup_user_contact_h">
					<view class="popup_user_contact_t">提示</view>
					<view class="popup_user_contact_u">{{popup_user_contact_type == 'phone' ? '电话：' : '微信号：'}}<text>{{popup_user_contact}}</text></view>
				</view>
				<view class="popup_user_contact_b">
					<view class="popup_user_contact_close" @click="is_popup_user_contact=false">取消</view>
					<view class="popup_user_contact_copy" @click="copyUserContact">复制</view>
				</view>
			</view>
		</view>
		<!-- 二维码弹窗end -->
		<!-- 购买查看会员次数弹窗 -->
		<paymentData :payMode="payMode" :pay_close="pay_close" :is-call="is_call" :payTitle="payTitle" :payGroupName="payGroupName" :userCount="userCount" :unit="unit" :rechargeType="rechargeType" :extends="payment_data_extends" @onChangeFun="onChangeFun" :isValue="isValue"></paymentData>
		<!--视频预览弹窗-->
		<view class='mask' catchtouchmove="true" :hidden='showVideo==false' @tap="showVideo=false"></view>
		<view v-if="showVideo" class="video-count">
			<!--#ifndef APP-PLUS-->
			<video id="myVideo" class="videoLink" autoplay loop :vslide-gesture-in-fullscreen="false" :src="play_video_url" @fullscreenchange="fullscreenchange" @fullscreenclick="fullscreenclick"></video>
			<!--#endif-->
			<!--#ifdef APP-PLUS-->
			<video id="myVideo" class="videoLink" autoplay loop
			 :src='play_video_url && (play_video_url.substring(0,4) == "http" || play_video_url.substring(0,5) == "https") ? play_video_url : "http:" + play_video_url'
			></video>
			<!--#endif-->
		</view>
		<view class="container_back" @click="onBlur" v-if="comment_community_id"></view>
		<view class="container" v-show="comment_community_id">
		    <view class="input-wrapper">
		      <input
		        type="text"
		        class="input uni-input"
		        v-model="comment_community_value"
				ref="inputRef"
				auto-blur
		        @blur="onBlur"
				cursor-spacing="10"
				placeholder="评论"
		      />
			  
			  <!-- :focus="focusState" -->
			  <view class="input-send" :class="comment_community_value ? 'input-send-on' : ''"  @click="createReply">发送</view>
		    </view>
		  </view>
		  <!-- 服务曝光结束通知 -->
		  <view class="end_of_exposure" v-if="popup_end_of_exposure == 1">
			  <view class="end_of_exposure_back"></view>
			  <view class="end_of_exposure_content">
				  <view class="end_of_exposure_close" @click="popup_end_of_exposure = 0">
					  <image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" style="width: 50rpx;height: 50rpx"/>
				  </view>
				  <view class="end_of_exposure_tit" style="margin-bottom: 30rpx;" v-if="popup_end_of_exposure_my == 1">广告服务通知</view>
				  <view class="end_of_exposure_messag" >该信息已完成一周免费推广</view>
				  <view class="end_of_exposure_messag" v-if="popup_end_of_exposure_my == 1">无法查看详情</view>
				  <view class="end_of_exposure_btn" v-if="popup_end_of_exposure_my == 1" @click="communityDelayed(community)">继续推广</view>
			  </view>
		  </view>
		  <!-- 服务曝光结束通知end -->
		  <!-- 升级VIP弹窗 -->
		  <view class="user_vip_tips" v-if="user_vip_tips">
		  	<view class="user_vip_back"></view>
		  	<view class="user_vip_content">
		  		<view class="user_vip_close" @click="user_vip_tips = false">
		  			<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" />
		  		</view>
		  		<view class="user_vip_icon">
		  			<image src="https://img.jukee.net/def/3902e202311271626269626.png" />
		  		</view>
		  		<view class="user_vip_title font-size32-bold">成为VIP会员</view>
				<view class="user_vip_tit font-size36-bold" style="font-size: 46rpx;">无限添加客户微信<br/>查看所有客户联系方式</view>
		  		<view class="user_vip_messag">更多权益请在 “我的” 会员中心查看</view>
		  		<view class="user_vip_btn" @click="goUrl('/pages/annex/vip_paid/index')">确定</view>
		  	</view>
		  </view>
		  <view class="back_popup flex-aj-center" @click="wechat_qrcode_img = ''" v-if="wechat_qrcode_img">
		  	<image :src="wechat_qrcode_img" style="width: 500rpx;border-radius: 20rpx;" mode="widthFix" @click="previewImage(wechat_qrcode_img)">
		  </view>
	</view>
</template>

<script>
import paymentData from '@/components/payDataList';
import { getUserInfo, getUserContactInformation } from '@/api/user.js';
import { getAttentionCircle, delCirCleCommunity } from '@/api/circle.js';
import {  followAuthorApi, incCommunityCountStart, incCommunityCountShare, replyCreateApi, replyLstApi, serviceTopRefresh } from '@/api/community.js';
import { mapGetters } from "vuex";
import { configMap } from '@/utils';
import { checkPhone } from '@/utils/validate.js';
import { HTTP_REQUEST_URL } from '@/config/app';
export default {
	components: {
		paymentData
	},
	data() {
		return {
			domain: HTTP_REQUEST_URL,
			userInfo: {},
			is_popup_user_contact: false,
			popup_user_contact: '',
			popup_user_contact_type: '',
			pay_close: false,
			payMode: [{
				name: '微信支付',
				icon: 'icon-weixinzhifu',
				value: 'wechat',
				title: '微信快捷支付',
				payStatus: true
				}
				// #ifdef H5 ||APP-PLUS
				,
				{
				name: '支付宝支付',
				icon: 'icon-zhifubao',
				value: 'alipay',
				title: '支付宝支付',
				payStatus: true
				}
				// #endif
				,
				{
					name: "余额支付",
					icon: "icon-yuezhifu",
					value: 'balance',
					title: '可用余额:',
					number: 0,
					payStatus: this.$store.getters.globalData.yue_pay_status
				}
			],
			gb_community_id: 0,
			comment_community_id: 0,
			comment_community_value: '',
			comment_page: 1,
			comment_limit: 4,
			reply_community_id: 0,
			reply_community_index: 0,
			comment_index: 0,
			showVideo: false,
			play_video_url: '',
			videoContext: '',
			community: {}, //服务
			check_servive_circle_id: 0,// 服务置顶刷新
			service_circle_top_ids: [], // 服务置顶人推广列表
			payTitle: '查看会员联系方式次数',
			payGroupName: 'user_contact_information',
			payment_data_extends: {},
			userCount: 0,
			unit: '个',
			rechargeType: 1,
			is_call: true,
			focusState: false, // 输入框是否聚焦
			isValue: false,
			popup_end_of_exposure: 0, // 曝光结束弹窗
			popup_end_of_exposure_my: 0,
			user_vip_tips: false, // 提醒用户开启VIP弹窗
			wechat_qrcode_img: '', // 微信二维码
		}
	},
	props: {
		list: {
			type: Array|Object,
			default: () => []
		},
		type: {
			type: Number,
			default: 1,
			value: 1,
		},
		swiper_height: {
			type: Number,
			default: 850
		},
		isMy: {
			type: Boolean,
			default: false,
		},
		isEdit: {
			type: Boolean,
			default: false,
		},
		isCirle: {
			type: Boolean,
			default: false,
		},
		isGroupLeader: {
			type: Number,
			default: 0,
		}
	},
	computed: configMap({is_community_video_start: 0}, mapGetters(['isLogin','viewColor','keyColor'])),
	created() {
		let that = this;
		this.videoContext = uni.createVideoContext('myVideo', this);
		if(this.isLogin){
			that.getUserInfo();
		}
	},
	methods: {
		previewImage(url) {
			uni.previewImage({
				urls: [url],
				longPressActions :{
					itemList:['保存图片']
				},
			})
		},
		/*查看视频*/
		clickVideo(video_url, community_id) {
			if (!this.is_community_video_start || this.is_community_video_start == 0) return false;
			incCommunityCountStart(community_id);
			this.showVideo = true
			this.play_video_url = video_url
			this.videoContext = uni.createVideoContext('myVideo', this);
			this.$nextTick(()=>{
				this.videoContext.play();
				this.videoContext.requestFullScreen({ direction: 0 });
				// this.videoContext.volume(1);
			})
		},
		fullscreenchange(e) {
			if (e.detail.fullScreen) {
				// 进入全屏后的操作
			  } else {
				// 退出全屏后的操作
				this.showVideo = false;
			  }
		},
		fullscreenclick(e) {
			this.showVideo = false;
		},
		onChangeFun: function(e) {
			let opt = e;
			let action = opt.action || null;
			let value = opt.value != undefined ? opt.value : null;
			action && this[action] && this[action](value);
		},
		payClose: function() {
			this.pay_close = false;
		},
		openH5UrlHandler(e){
			const url = encodeURIComponent(e.currentTarget.dataset.url)
			uni.setClipboardData({
				data: url,
				success: function(res){
				}
			});
			/* wx.navigateTo({
				url: `/pages/extends/webTest/webTest?url=${url}`,
			}) */
		},
		// 关闭服务评论按钮
		closeServiceComment() {
			let that = this;
			that.gb_community_id = 0;
			that.comment_community_id = 0;
			that.onFocus();
		},
		openSendCommend(community_id, index) {
			let that = this;
			if(that.comment_community_id == community_id) {
				that.comment_community_id = 0;
				that.comment_index = 0;
				that.comment_community_value = '';
			} else {
				that.comment_community_id = community_id;
				that.comment_index = index;
				that.comment_community_value = '';
			}
		},
		/*发表评论*/
		createReply() {
			let that = this;
			if(!that.comment_community_value) {
				return that.$util.Tips({title: '请输入评论内容'})
			}
			replyCreateApi(that.comment_community_id,{content: that.comment_community_value,reply_id: 0}).then(res => {
				that.getReplyList(that.comment_community_id, that.comment_index, true);
				that.comment_community_id = 0;
				that.comment_community_value = '';
				that.comment_index = 0;
			}).catch(err => {
				uni.showToast({
					title: err,
					icon: 'none'
				})
			});
		},
		onFocus() {
			  let that = this;
			  wx.createSelectorQuery()
			      .select('.uni-input')
			      .node()
			      .exec((res) => {
			        let inputNode = res[0];
			        inputNode.focus();
			      });
			  /* that.focusState = false; // 每次都要初始化 focus 属性
			  setTimeout(() => {
				that.$nextTick(() => {
				  setTimeout(() => {
					that.focusState = true; // this.secondFocus 是第二个文本框的 focus 属性。
				  }, 0);
				});
			  }, 100); */
		},
		onBlur() {
		  let that = this;
		  setTimeout(function() {
			  that.focusState = false; // 输入框失去焦点时隐藏键盘
			  that.comment_community_id = 0;
			  that.comment_index = 0;
			  that.comment_community_value = '';
		  }, 1000)
		},
		clickImg(data, index, community_id) {
			incCommunityCountStart(community_id);
			uni.previewImage({
				urls: data, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: index, // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {},
			})
		},
		/* onInputBlur() {
			let that = this;
			that.comment_community_id = 0;
			that.comment_community_value = '';
		}, */
		/**
		 * 查看更多评论
		 */
		getReplyList(community_id, index, restart = false) {
			let that = this;
			if(that.reply_community_id != community_id || restart) {
				that.reply_community_id = community_id;
				that.reply_community_index = index;
				that.$set(that.list[index], 'reply', [])
				that.comment_page = 1;
			}
			let data = {
				page: that.comment_page,
				limit: that.comment_limit
			}
			replyLstApi(community_id, data).then(res=>{
				if(res.data.list.length) {
					let reply = that.list[index].reply.concat(res.data.list);
					that.$set(that.list[index], 'reply', reply)
					that.comment_page++;
				} else {
					return that.$util.Tips({title: '评论已经到底了'});
				}
			}).catch(err=>{
				
			})
		},
		// 服务推广精准用户
		userPromotion(data) {
			this.payment_data_extends = {
				community_id: data.community_id
			}
			this.userCount = ''
			this.payTitle = '推广精准客户',
			this.payGroupName = 'service_promotion',
			this.unit = '位',
			this.rechargeType = 4,
			this.is_call= false;
			this.pay_close = true;
		},
		// 编辑服务
		editCommunity(data) {
			this.$emit('editCommunity', data.community_id)
		},
		// 上下架
		editCommunityShow(index) {
			this.$emit('editCommunityShow', index)
		},
		// 服务推广首页置顶
		labelPromotion(data) {
			this.payment_data_extends = {
				community_id: data.community_id
			}
			// this.userCount = data.promotion_top_time
			this.isValue = false;
			this.payTitle = '行业热榜置顶';
			this.payGroupName = 'service_home_top';
			this.unit = '天';
			this.rechargeType = 16;
			this.is_call= false;
			this.pay_close = true;
		},
		// 服务推广时间
		communityDelayed(data) {
			this.popup_end_of_exposure = 0;
			this.payment_data_extends = {
				community_id: data.community_id
			}
			// this.userCount = data.promotion_top_time
			this.isValue = false;
			this.payTitle = '付费发布广告';
			this.payGroupName = 'community_delayed';
			this.unit = '天';
			this.rechargeType = 15;
			this.is_call= false;
			this.pay_close = true;
		},
		// 服务推广首页
		circlePromotion(data) {		
			this.payment_data_extends = {
				community_id: data.community_id
			}
			// this.userCount = data.promotion_time
			this.isValue = false;
			this.payTitle = '首页热榜置顶';
			this.payGroupName = 'community_promotion';
			this.unit = '天';
			this.rechargeType = 3;
			this.is_call= false;
			this.pay_close = true;
		},
		// 服务首页置顶刷新
		homeRefresh(data) {
			let that = this;
			this.payment_data_extends = {
				community_id: data.community_id
			}
			this.userCount = this.userInfo.service_home_top_count
			this.payTitle = '服务首页推广刷新'
			this.payGroupName = 'service_top_refresh'
			this.unit = '次'
			this.rechargeType = 13
			this.is_call= false;
			this.pay_close = true;
			/* serviceTopRefresh(data.community_id, {type: 2}).then(res=>{
				that.$util.Tips({title: res.message})
			}).catch(err=>{
				if(err == '服务首页推广刷新次数不足') {
					that.serviceTopRefreshCount(data);
				}
			}) */
		},
		//  服务首页置顶次数购买
		serviceTopRefreshCount(data) {
			this.payment_data_extends = {
				uid: this.userInfo.uid
			}
			this.userCount = this.userInfo.service_home_top_count
			this.payTitle = '服务首页推广刷新'
			this.payGroupName = 'service_top_refresh'
			this.unit = '次'
			this.rechargeType = 13
			this.is_call= false;
			this.pay_close = true;
		},
		// 服务刷新
		serviceRefresh(data) {
			let that = this;
			this.payment_data_extends = {
				community_id: data.community_id
			}
			if (data.is_industry_top == 1 && data.is_promotion == 1) {
				this.userCount = this.userInfo.service_home_top_count
				this.payTitle = '置顶刷新'
				this.payGroupName = 'service_top_refresh'
				this.rechargeType = 13
			} else if (data.is_industry_top == 1) {
				this.userCount = this.userInfo.service_home_top_count
				this.payTitle = '行业置顶刷新'
				this.payGroupName = 'service_top_refresh'
				this.rechargeType = 13
			} else if (data.is_promotion == 1) {
				this.userCount = this.userInfo.service_home_top_count
				this.payTitle = '首页置顶刷新'
				this.payGroupName = 'service_top_refresh'
				this.rechargeType = 13
			} else {
				this.userCount = this.userInfo.service_top_count
				this.payTitle = '刷新'
				this.payGroupName = 'service_refresh'
				this.rechargeType = 5
			}
			this.unit = '次'
			this.is_call= false;
			this.pay_close = true;
			/* serviceTopRefresh(data.community_id).then(res=>{
				that.$util.Tips({title: res.message})
			}).catch(err=>{
				if(err == '服务置顶次数不足') {
					that.serviceTopCount(data);
				}
			}) */
		},
		// 服务刷新次数购买
		serviceTopCount(data) {
			this.payment_data_extends = {
				uid: this.userInfo.uid
			}
			this.userCount = this.userInfo.service_top_count
			this.payTitle = '服务刷新置顶'
			this.payGroupName = 'service_refresh'
			this.unit = '次'
			this.rechargeType = 5
			this.is_call= false;
			this.pay_close = true;
		},
		// 服务人脉圈置顶
		serviceCircleTop(data) {
			if(this.check_servive_circle_id == data.community_id) {
				this.check_servive_circle_id = 0;
			} else {
				this.check_servive_circle_id = data.community_id
				this.community = data;
			}
			this.service_circle_top_ids = [];
		},
		changeServiceCircleTop(e) {
			this.service_circle_top_ids = e.detail.value || [];
		},
		payServiceCircleTop() {
			if(!this.service_circle_top_ids.length) return this.$util.Tips({title: '请至少选择一个人脉圈推广置顶服务'})
			this.payment_data_extends = {
				service_circle_top_ids: this.service_circle_top_ids,
				community_id: this.community.community_id
			}
			this.userCount = this.service_circle_top_ids.length
			this.payTitle = '推广服务人脉圈/个'
			this.payGroupName = 'service_circle_promotion'
			this.unit = '天1个人脉圈'
			this.rechargeType = 6
			this.is_call= false;
			this.pay_close = true;
		},
		/**
		 * 查看会员联系方式
		 * @param {Object} uid
		 * @param {Object} contact_information
		 */
		getUserContactInformations(data, contact_information, is_service = 0) {
			if(!this.isLogin) return this.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/user/index'})
			let that = this;
			incCommunityCountStart(data.community_id);
			if(is_service == 1) {
				if(contact_information == 'map') {
					console.log(data);
					uni.openLocation({
						latitude: parseFloat(data.lat),
						longitude: parseFloat(data.lng),
						scale: 8,
						geocode: true,
						title: data.title,
						address: data.province + data.city + data.district + data.address,
						success: function(res) {
							console.log(res);
						}
					});
				} else {
					that.popup_user_contact = data[contact_information] || '暂未设置该联系方式'
					that.popup_user_contact_type = contact_information;
					that.is_popup_user_contact = true;
				}
				return false;
			}
								
			let uid = data.author.uid;
			if(contact_information == 'phone' || contact_information == 'we_chat_account'){
				/* if (that.isCirle) return that.$util.Tips({
					title: '付费进圈可查看会员联系方式'
				}) */
				if (that.isCirle) {
					this.$emit('eventFunction');
					return false;
				}
				getUserContactInformation({uid, contact_information, is_service: 1}).then(res=>{
					if(contact_information == 'phone' && checkPhone(res.message)) {
						return uni.makePhoneCall({
							phoneNumber: res.message // 替换为你想拨打的电话号码
						  }).then(() => {
							console.log('拨打电话成功')
						  }).catch((error) => {
							console.log('拨打电话失败', error)
						  })
					} else {
						if (res.data && res.data.is_img == 1) {
							that.wechat_qrcode_img = res.data.data;
						} else {
							if (res.message) {
								that.popup_user_contact = res.message || '暂未设置该联系方式'
								that.popup_user_contact_type = contact_information;
								that.is_popup_user_contact = true;
							} else {
								uni.showModal({
									title: '温馨提示',
									content: '等待对方验证',
									showCancel: false,
								})
							}
						}
					}
				}).catch(err=>{
					if(err == '次数不足') {
						that.user_vip_tips = true;
						/* that.pay_close = true;
						
						that.payTitle= '查看会员联系方式次数';
						that.payGroupName= 'user_contact_information';
						that.payment_data_extends= {};
						that.userCount= 0;
						that.unit= '个';
						that.rechargeType= 1;
						that.is_call= true; */
					}
				})
			}else if(contact_information == 'share') {
				that.$emit('setCommunityShare', data)
				/* uni.showShareMenu({
					title: data.title,
					imageUrl: data.image.length ? data.image[0] : 'https://img.jukee.net/def/6c0e4202309031609147410.png',
					path: '/pages/index/index?spid='+that.userInfo.uid,
					success(res) {
					  // 分享成功
					  console.log('分享成功', res);
					  incCommunityCountShare(data.community_id).then(res=>{
					  })
					},
					fail(err) {
					  // 分享失败
					  console.log('分享失败', err);
					}
				}) */
				/* uni.share({
					type: 0,
					scene: 'WXSceneSession',
					title: data.title,
					imageUrl: data.image.length ? data.image[0] : 'https://img.jukee.net/def/6c0e4202309031609147410.png',
					href: '/pages/index/index?spid='+that.userInfo.uid,
					success(res) {
					  // 分享成功
					  console.log('分享成功', res);
					},
					fail(err) {
					  // 分享失败
					  console.log('分享失败', err);
					}
				}); */
			}else if(contact_information == 'report') {
				that.$util.Tips('/pages/extends/user_report/index?type=1&link_id='+data.community_id)
			}else if(contact_information == 'map') {
				if (!data.lat || !data.lng)
					return this.$util.Tips({
						title: '该服务暂无定位！'
					});
					uni.openLocation({
						latitude: parseFloat(data.lat),
						longitude: parseFloat(data.lng),
						scale: 8,
						geocode: true,
						title: data.title,
						address: data.province + data.city + data.district + data.address,
						success: function(res) {
							console.log(res);
						}
					});
			}
		},
		copyUserContact() {
			let that = this;
			that.is_popup_user_contact = false;
			if(this.popup_user_contact && this.popup_user_contact!='暂未设置该联系方式') {
				uni.setClipboardData({
				  data: that.popup_user_contact,
				  success: function () {
					return that.$util.Tips({title:'复制成功'});
				  }
				})
			}else{
				return this.$util.Tips({title:'复制失败'});
			}
		},
		/**
		 * 获取个人用户信息
		 */
		getUserInfo: function() {
			let that = this;
			getUserInfo().then(res => {
				that.userInfo = res.data;
				// #ifdef H5 ||APP-PLUS
				that.payMode[2].number = res.data.now_money;
				// #endif
				// #ifndef H5 ||APP-PLUS
				that.payMode[1].number = res.data.now_money;
				// #endif
			});
		},
		// 关注作者
		followAuthor: function(key, status) {
			if (this.isLogin === false) {
				return this.$util.Tips({title: '请先登录'}, {
					tab: 1,
					url: '/pages/user/index'
				})
			} else {
				let that = this;
				followAuthorApi(that.list[key].uid,{status: status}).then(res => {
					if (res.status === 200) {
						that.list[key].is_start = status
					}
					that.$util.Tips({
						title: res.message
					});
				}).catch(err=>{
					that.$util.Tips({
						title: err
					});
				});
			}
		},
		getCircleInfo(circle_id) {
			let that = this;
			if(!that.isLogin) return that.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/user/index'})
			getAttentionCircle(circle_id).then(res=>{
				if(res.status == 200 && res.data.pay_type){
					return that.$util.Tips('/pages/extends/circle_create/circle_info?id='+circle_id)
				}
				return that.$util.Tips('/pages/extends/circle_create/circle_pay?id='+circle_id);
			}).catch(err=>{
				that.$util.Tips({title: err})
			})
		},
		goUrl(url) {
			if(!url) return false;
			this.$util.Tips(url);
		},
		goUrlService(data) {
			let currentDate = new Date();  
			let formattedDate = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDate();
			if (new Date(data.stop_time) < new Date(formattedDate)) {
				this.community = data;
				this.popup_end_of_exposure = 1;
				this.popup_end_of_exposure_my = data.is_my_send ? 1 : 0;
				return true;
				/* return uni.showModal({  
				  title: '服务广告通知',  
				  content: '该信息已完成一周曝光',  
				  success: function(res) {  
					if (res.confirm) {  
					  console.log('用户点击了“确认”');  
					} else if (res.cancel) {  
					  console.log('用户点击了“取消”');  
					}  
				  }  
				}); */
			}
			if (data.price && data.price > 0) {
				this.$util.Tips('/pages/plantGrass/demand_detail/index?id='+data.community_id+'&is_type=1');
			} else {
				this.$util.Tips('/pages/plantGrass/plant_user/index?id='+data.uid+'&searchType=1&community_id='+data.community_id);
			}
		},
		hasBlockLine(index) {
			this.$emit('hasBlockLine', index)
		},
		hasNoneLine(index) {
			this.$emit('hasNoneLine', index)
		},
		delCircleCommunity(data, index) {
			let that = this;
			uni.showModal({
				title: "微信提示",
				content: '确定删除？',
				success: function (res) {
					if (res.confirm) {
						delCirCleCommunity(that.isGroupLeader, {community_id: data.community_id}).then(res=>{
							that.$emit('delCommunity', index)
						}).catch(err => {
							that.$util.Tips({title: err})
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		}
	}
}
</script>
<style scoped lang="scss">
 ::v-deep checkbox .uni-checkbox-input.uni-checkbox-input-checked,
 	::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	  border: 1px solid var(--view-theme)!important;
	  background-color: var(--view-theme)!important;
	  color: #fff!important;
	}
.list_circle_demand {
	// padding: 0 30rpx;
	.circle_demand_service_item {
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 50rpx 0rpx rgba(125,124,116,0.1);
		border-radius: 12rpx;
		padding: 40rpx 30rpx;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: nowrap;
		.circle_demand_service_image {
			width: 164rpx;
			height: 164rpx;
			image {
				width: 164rpx;
				height: 164rpx;
				border-radius: 12rpx;
			}
		}
		.circle_demand_service_data {
			margin-left: 30rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			.circle_demand_service_title {
				font-size: 32rpx;
				font-weight: 500;
				color: #2C2C2C;
				line-height: 32rpx;
				margin-top: 14rpx;
			}
			.circle_demand_service_desc{
				font-size: 24rpx;
				font-weight: 400;
				color: #767676;
				line-height: 34rpx;
			}
			.circle_demand_service_hist{
				font-size: 24rpx;
				font-weight: 400;
				color: #767676;
				line-height: 34rpx;
				margin-top: auto;
			}
			.circle_demand_service_tel {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				margin-top: 30rpx;
				.circle_demand_service_t {
					width: 40rpx;
					height: 40rpx;
					margin-right: 58rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.circle_demand_service_add {
				margin-top: auto;
				display: flex;
				flex-wrap: inherit;
				align-items: center;
				.circle_demand_service_add_icon {
					width: 24rpx;
					height: 24rpx;
					display: flex;
					align-items: center;
					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
				.circle_demand_service_address{
					flex:1;
					margin-left: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #767676;
					line-height: 34rpx;
				}
			}
		}
		.circle_demand_service_tel {
			display: flex;
			// flex-wrap: nowrap;
			flex-direction: column;
			align-items: center;
			margin-left: 30rpx;
			.circle_demand_service_t {
				width: 60rpx;
				height: 60rpx;
				// margin-right: 58rpx;
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			.circle_demand_service_t:last-child {
				margin-top: auto;
			}
		}
	}
}
.popup_user_contact {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	    z-index: 10;
	.popup_user_contact_c { 
		width: 480rpx;
		margin: 20vh auto;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		.popup_user_contact_h {
			padding: 30rpx 30rpx 80rpx;
			border-bottom: 1rpx solid #DDDDDD;
			.popup_user_contact_t {
				font-size: 34rpx;
				font-weight: 400;
				color: #2C332D;
				line-height: 48rpx;
			}
			.popup_user_contact_u{
				font-size: 28rpx;
				font-weight: 500;
				color: #323232;
				line-height: 40rpx;
				margin-top: 32rpx;
				text {
					color: #F73D3B;
				}
			}
		}
		.popup_user_contact_b {
			padding: 20rpx 0;
			text-align: center;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			.popup_user_contact_close {
				font-size: 28rpx;
				font-weight: 400;
				color: #666764;
				line-height: 40rpx;
				flex: 1;
			}
			.popup_user_contact_copy {
				font-size: 28rpx;
				font-weight: 400;
				color: #323232;
				line-height: 40rpx;
				border-left: 1rpx solid #DDDDDD;
				flex: 1;
			}
		}
	}
}
.circle_service_item {
	display: flex;
	flex-wrap: nowrap;
	padding: 30rpx 0;
	overflow: hidden;
	border-bottom: 1rpx solid #DDDDDD;
	.circle_service_avatar {
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
		text-align: center;
		margin-right: 20rpx;
		image {
			width: 74rpx;
			height: 74rpx;
			border-radius: 50%;
		}
	}
	.circle_service_price {
		color: #F44601;
		text {
			font-size: 26rpx;
		}
	}
	.circle_service_content {
		flex: 1;
		// margin-left: 10rpx;
		overflow: hidden;
		.circle_service_con {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			margin-bottom: 30rpx;
			// justify-content: space-between;
			.circle_service_u {
				flex: 1;
				margin-right: 20rpx;
				.circle_service_nickname {
					font-size: 32rpx;
					font-weight: 500;
					color: #292E30;
					line-height: 44rpx;
					display: flex;
					align-items: center;
					.circle_service_name {
						overflow: hidden;
						white-space: nowrap;
					}
				}
				.circle_service_time {
					font-size: 20rpx;
					font-weight: 400;
					color: #292E30;
					line-height: 28rpx;
					margin-top: 6rpx;
					.is_refresh {
						color: #FE4504;
						margin-left: 20rpx;
					}
				}
			}
			.service_guanzhu {
				margin-left: 15rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				background: #F7F8F9;
				border-radius: 33rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #323232;
				line-height: 42rpx;
				padding: 12rpx 24rpx;
				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
			.service_promotion {
				display: flex;
				grid-gap: 5rpx;
				flex-wrap: nowrap;
				align-items: center;
				margin-left: auto;
				
			}
			.circle_service_t {
				display: flex;
				grid-gap: 30rpx;
				flex-wrap: nowrap;
				align-items: center;
				margin-left: 30rpx;
				.circle_service_tel {
					width: 62rpx;
					height: 62rpx;
					image {
						width: 62rpx;
						height: 62rpx;
						border-radius: 50%;
					}
				}
			}
		}
		.circle_service_content {
			font-size: 30rpx;
			font-weight: 400;
			color: #323232;
			line-height: 42rpx;
			// margin-top: 30rpx;
			word-break: break-all;
		}
		.circle_service_img {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 4rpx;
			margin-top: 20rpx;
			border-radius: 15rpx;
			.circle_service_imgs {
				width: 200rpx;
				height: 200rpx;
				border-radius: 15rpx;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 15rpx;
				}
			}
			/* .circle_service_imgs:nth-child(1) image {border-radius: 26rpx 0 0 0;}
			.circle_service_imgs:nth-child(3) image {border-radius: 0 26rpx 0 0;}
			.circle_service_imgs:nth-child(4) image {border-radius: 0 0 0 26rpx;}
			.circle_service_imgs:nth-child(6) image {border-radius: 0 0 26rpx 0;} */
		}
		.service_link {
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-wrap: nowrap;
			margin-top: 10rpx;
			.link_pic {
				width: 50rpx;
				height: 50rpx;
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
			.link_url {
				margin-left: 20rpx;
			}
		}
		.my_show_circle {
			.service_circle_recommend {
				display: flex;
				align-items: center;
				grid-gap: 5rpx;
				overflow: hidden;
				width: 100%;
				.service_circle_item {
					flex: 1;
					overflow: hidden;
					display: flex;
					align-items: center;
					grid-gap: 5rpx;
					image {
						width: 58rpx;
						height: 58rpx;
						flex-shrink: 0;
						border-radius: 50%;
					}
				}
				.service_circle_more {
					font-size: 36rpx;
					font-weight: bold;
					background: #F7F7F7;
					border-radius: 10rpx;
					margin-left: auto;
					image {
						width: 50rpx;
					}
				}
			}
		}
		.gn_more {
			display: flex;
			width: 100%;
			position: relative;
			margin-top: 20rpx;
			.service_circle_recommend {
				display: flex;
				align-items: center;
				grid-gap: 5rpx;
				.service_circle_item {
					width: 58rpx;
					height: 58rpx;
					border-radius: 50%;
					image {
						width: 58rpx;
						height: 58rpx;
						border-radius: 50%;
					}
				}
				.service_circle_more {
					font-size: 34rpx;
					font-weight: bold;
					background-color: #FADC00;
					border-radius: 50%;
					width: 58rpx;
					height: 58rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.gn_more_btn {
				margin-left: auto;
				background-color: #F7F7F7;
				border-radius: 10rpx;
				flex-direction: center;
				align-items: center;
				padding: 6rpx 17rpx;
				font-size: 30rpx;
				font-weight: bold;
				// letter-spacing: 6rpx;
				cursor: pointer;
			}
			.gn_more_btn:hover {
				background-color: #DEDEDE;
			}
		}
		@keyframes slideIn {
		  from {
		    right: 0;
		  }
		  to {
		    right: 80rpx;
		  }
		}
		@keyframes slideOut {
		  from {
		    right: 0;
		  }
		  to {
		    right: -200px;
		  }
		}
		.circle_service_infos.show {
		  animation: slideIn 0.5s forwards;
		}
		.circle_service_infos.hide {
		  animation: slideOut 0.5s forwards;
		}
		.circle_service_infos {
			display: flex;
			align-items: center;
			grid-gap: 20rpx;
			position: absolute;
			right: -200px;
			z-index: 1;
			background-color: #4C4C4C;
			color: #fff;
			height: 100%;
			padding: 0 10rpx;
			border-radius: 5rpx;
			.circle_service_share {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				background-color: unset;
				.circle_service_icon {
					display: flex;
					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
				.circle_service_count {
					margin-left: 10rpx;
					font-size: 26rpx;
					font-weight: 400;
					// color: #2F2F2F;
					color: #fff;
					line-height: 30rpx;
				}
			}
		}
		.comment_data {
			margin-top: 30rpx;
			padding: 30rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			font-size: 30rpx;
			.reply_user {
				display: flex;
				overflow: hidden;
				gap: 20rpx;
				.reply_user_avatar {
					width: 54rpx;
					height: 54rpx;
					border-radius: 50%;
				}
			}
			.comment_item_value {
				margin-top: 10rpx;
				text {
					color: #A6B6C8;
				}
			}
			.comment_check {
				margin-top: 20rpx;
				line-height: 50rpx;
			}
			.send_comment {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				font-size: 30rpx;
				.send_comment_input {
					flex: 1;
					background: #fff;
					margin-right: 20rpx;
					padding: 10rpx 20rpx;
				}
				.send_comment_button {
					background: #FFE103;
					border-radius: 5rpx;
					padding: 15rpx;
				}
			}
		}
	}
}
.video-count{
	position: fixed;
	width: 600rpx;
	height: 500rpx;
	top: 50%;
	left: 50%;
	margin-left: -300rpx;
	margin-top: -250rpx;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	.videoLink{
		width: 600rpx;
		height: 500rpx;
	}
}
.circle_top_list {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding-top: 30rpx;
	grid-gap: 20rpx;
	.circle_top_item {
		overflow: hidden;
		width: 120rpx;
		position: relative;
		.circle_top_checkbox {
			position: absolute;
			right: 0;
			top: 10rpx;
		}
		.circle_top_img {
			width: 120rpx;
			height: 120rpx;
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	.circle_top_button {
		width: 100%;
		text-align: center;
		background-color: #FFE103;
		border-radius: 30rpx;
		padding: 20rpx;
	}
}
.container_back{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 998;
	background-color: rgba(0,0,0,0);
}
.service_promotion_btn {
	padding: 10rpx 10rpx;
	background: #FFE103;
	border-radius: 15rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #1C211D;
	// margin-left: 10rpx;
	white-space: nowrap;
	width: fit-content;
}
.service_stop {
	display: flex;
	align-items: center;
	margin-top: 30rpx;
	.service_stop_time {
		// flex: 1;
		font-size: 26rpx;
		.service_stop_t {
			white-space: nowrap;
		}
	}
	.service_delayed {
		flex: 1;
		.service_delayed_btn {
			width: fit-content;
			margin: 0 auto;
			padding: 20rpx 40rpx;
			background-color: #FFE103;
			border-radius: 10rpx;
			font-weight: bold;
			font-size: 36rpx;
		}
	}
}
.home_promotion {
	display: grid;
	grid-gap: 20rpx;
	margin-top: 30rpx;
}
.container {
  flex: 1;
  justify-content: flex-end;
  padding-bottom: 20px; /* 键盘的高度 */
  .input-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(247, 247, 247, 1);
    padding: 10px 20px 10px;
    z-index: 999; /* 设置较高的层级，使输入框始终显示在键盘上方 */
	display: flex;
	
  }
  
  .input {
    width: 100%;
    height: 40px;
    outline: none;
    padding: 0 10px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10rpx;
  }
  
  .input-send {
	  border: 1px solid #ccc;
	  color: #ccc;
	  padding: 10rpx;
	  margin-left: 20rpx;
	  white-space: nowrap;
	  align-items: center;
	  display: flex;
	  border-radius: 10rpx;
  }
  .input-send-on {
	  border: 1px solid #FFE103;
	  background-color: #FFE103;
	  color: #000;
  }
  
  .input-active {
    border-color: #06c;
  }
}

// 服务曝光结束
.end_of_exposure_back {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 35;
}
.end_of_exposure_content {
	background-color: #fff;
	position: fixed;
	top: 30%;
	left: 50rpx;
	right: 50rpx;
	// margin: 50% 50rpx 0;
	border-radius: 30rpx;
	padding: 30rpx;
	text-align: center;
	z-index: 35;
	.end_of_exposure_close {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.end_of_exposure_tit  {
		font-size: 42rpx;
		color: #FE4504;
		font-weight: bold;
	}
	.end_of_exposure_messag {
		font-size: 42rpx;
		font-weight: bold;
	}
	.end_of_exposure_btn {
		font-weight: bold;
		background-color: #FDE515;
		display: inline-block;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 42rpx;
	}
}
// 服务曝光结束end
// VIP弹窗
.user_vip_back {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 35;
}
.user_vip_content {
	background-color: #fff;
	position: fixed;
	top: 30%;
	left: 50rpx;
	right: 50rpx;
	z-index: 35;
	border-radius: 30rpx;
	padding: 30rpx;
	text-align: center;
	.user_vip_close {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
	.user_vip_icon {
		margin: 0 auto;
		image {
			width: 140rpx;
			height: 130rpx;
			margin: 0 auto;
			display: block;
		}
	}
	.user_vip_tit  {
		margin-top: 20rpx;
	}
	.user_vip_messag {
		font-size: 32rpx;
		margin-top: 30rpx;
	}
	.user_vip_btn {
		font-weight: bold;
		background-color: #FDE515;
		display: inline-block;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 42rpx;
	}
}
// VIP弹窗end
</style>